import React, { useEffect, useContext, memo, useCallback } from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import { getLiveData } from '@/redux/async'
import Nav from './components/Nav'
import LiveInfo from './components/LiveInfo'
import './index.scss'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import Context from '@/config/context'
function Live(props) {
    const {
        liveData: { bannerList, itemList },
        dispatch,
        history
    } = props

    useEffect(() => {
        dispatch(getLiveData())
    }, [])
    useEffect(() => {
        new Swiper('.swiper-container', {
            loop: true, //循环
            autoplay: {
                //滑动后继续播放（不写官方默认暂停）
                disableOnInteraction: false
            },
            pagination: {
                //分页器
                el: '.swiper-pagination'
            }
        })
    }, [bannerList])
    const watchmore = useCallback((data) => {
        let { parentAreaId: pid, parentAreaName: pname, areaId, areaName } = data
        history.push({
            pathname: '/live/list',
            search: `?pid=${pid}&pname=${pname}&areaid=${areaId}&areaname=${areaName}`
        })
    })
    const { picURL } = useContext(Context)
    return (
        <div className="live">
            <Helmet>
                <title>哔哩哔哩直播</title>
            </Helmet>
            <Nav />
            <div className="live-main">
                <div className="live-banner">
                    {bannerList.length > 0 ? (
                        <div className="swiper-container">
                            <div className="swiper-wrapper">
                                {bannerList.map((item) => (
                                    <LiveItem picURL={picURL} {...item} key={item.id} />
                                ))}
                            </div>
                            <div className="swiper-pagination clear" />
                        </div>
                    ) : null}
                </div>
                {/* 分区直播 */}
                {itemList.map((item, i) => (
                    <div className="live-room" key={i}>
                        <h4
                            className="flex middle mb10"
                            onClick={() => {
                                watchmore(item)
                            }}
                        >
                            <div className="cell-main l">
                                {item.areaName ? item.areaName : item.parentAreaName}
                            </div>
                            进去看看
                            <img
                                className="ml5"
                                src={require('../../assets/images/right-arrow-button.png')}
                                width="20px"
                                height="20px"
                                alt=""
                            />
                        </h4>
                        <div className="flex wrap">
                            {item.list &&
                                item.list.map((data, i) => {
                                    return <LiveInfo key={i} data={data} picURL={picURL} />
                                })}
                        </div>
                    </div>
                ))}
                <div className="flex center live-botton bg-white">
                    <div className="live-btn cell-main">
                        <a href="/live/list?pid=0&pname=全部直播&areaid=&areaname=">全部直播</a>
                    </div>
                    <div className="live-btn cell-main">
                        <a href="/live/areas">全部分类</a>
                    </div>
                </div>
            </div>
        </div>
    )
}
const LiveItem = memo(function BannerItem(props) {
    const { id, link, pic, picURL } = props

    return (
        <div className="swiper-slide" key={id}>
            <a href={link}>
                <img src={`${picURL}?pic=${pic}`} width="100%" height="100%" />
            </a>
        </div>
    )
})
export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Live)
